<template>
  <!--我的-->
  <div>
    <section class="profile">
      <van-nav-bar title="我的" />
      <section class="profile-number">
        <div class="profile-link">
          <div class="file">
            <img :src="userimg ? userimg : baseImg" alt="" class="img_tou" />
          </div>
          <router-link
            :to="username ? '/isRegist' : '/login'"
            class="user-info"
          >
            <p class="user-info-top">
              {{ username || "登录/注册" }}
            </p>
          </router-link>
        </div>
      </section>
      <section class="profile_info_data">
        <router-link to="/wallet" class="info_data_link">
          <span class="info_data_ico">
            <i class="iconfont icon-zhifu"></i>
          </span>
          <span class="info_data_bottom">我的余额</span>
        </router-link>
        <router-link to="/physical" class="info_data_link">
          <span class="info_data_top1">
            <i class="iconfont icon-ico"></i>
          </span>
          <span class="info_data_bottom">我的身份卡</span>
        </router-link>
        <router-link to="/shopping" class="info_data_link">
          <span class="info_data_top">
            <i class="iconfont icon-youhuiquan"></i>
          </span>
          <span class="info_data_bottom">我的优惠</span>
        </router-link>
      </section>
      <section class="profile_my_order">
        <!-- 个人资料 -->
        <keep-alive>
          <router-link to="/information" class="my_order">
            <span>
              <i class="iconfont icon-jibenxinxi"></i>
            </span>
            <div class="my_order_div">
              <span>个人资料</span>
              <span class="my_order_icon">
                <i class="iconfont icon-fangxiangzuo"></i>
              </span>
            </div>
          </router-link>
          <router-view />
        </keep-alive>
        <!-- 健康数据 -->
        <router-link to="/linechart" class="my_order">
          <span>
            <i class="iconfont icon-shenti"></i>
          </span>
          <div class="my_order_div">
            <span>健康数据</span>
            <span class="my_order_icon">
              <i class="iconfont icon-fangxiangzuo"></i>
            </span>
          </div>
        </router-link>
        <!-- 关联子女 -->
        <router-link to="#" class="my_order">
          <span>
            <i class="iconfont icon-lianxiren"></i>
          </span>
          <div class="my_order_div">
            <span>关联子女</span>
            <span class="my_order_icon">
              <i class="iconfont icon-fangxiangzuo"></i>
            </span>
          </div>
        </router-link>
      </section>
      <section class="profile_my_order">
        <!-- 关于 -->
        <router-link to="#" class="my_order">
          <span>
            <i class="iconfont icon-guanyu"></i>
          </span>
          <div class="my_order_div">
            <span>关于</span>
            <span class="my_order_icon">
              <i class="iconfont icon-fangxiangzuo"></i>
            </span>
          </div>
        </router-link>
        <!-- 安全中心 -->
        <router-link to="#" class="my_order">
          <span>
            <i class="iconfont icon-anquan"></i>
          </span>
          <div class="my_order_div">
            <span>安全中心</span>
            <span class="my_order_icon">
              <i class="iconfont icon-fangxiangzuo"></i>
            </span>
          </div>
        </router-link>
        <!-- 设置 -->
        <router-link to="/set" class="my_order">
          <span>
            <i class="iconfont icon-shezhi1"></i>
          </span>
          <div class="my_order_div">
            <span>设置</span>
            <span class="my_order_icon">
              <i class="iconfont icon-fangxiangzuo"></i>
            </span>
          </div>
        </router-link>
      </section>
    </section>
  </div>
</template>
<script>
import { reqLogin } from "../../api";
import { mapState } from "vuex";
export default {
  data() {
    return {
      // 默认的图片
      baseImg: "",
      userimg: "",
      image: "",
      fileList: [], //默认是一个空数组
      imageData: {},
      isShow: false,
      showList: false,
    };
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  methods: {
    async getInfo() {
      try {
        const result = await reqLogin(this.getToken);
        if (result.code1 === 0) {
          this.info = result.data.token;
        }
      } catch (error) {
        console.log(error);
      }
    },
  },
  created() {
    this.baseImg = require("./images/04.png");
    this.image = localStorage.setItem("Img", "@/views/Profile/images/04.png");
    this.userimg = localStorage.getItem("userimg");
    this.username = localStorage.getItem("username");
  },
  mounted() {
    if (this.getToken) {
      this.getInfo();
    }
  },
};
</script>
<style>
.profile {
  width: 100%;
  overflow: hidden;
}

.profile-number {
  margin-top: 1px;
  height: 170px;
  background-color: #08f;
}
.profile-link {
  position: relative;
  display: block;
  background: #08f;
  padding: 15px 10px;
}

.profile_image {
  float: left;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  vertical-align: top;
}

.icon-geren {
  background: #e4e4e4;
  font-size: 60px;
}
.user-info {
  margin-left: 15px;
}
.user-info > span {
  font-weight: 700;
  font-size: 22px;
  color: #fff;
  position: absolute;
  left: 50%;
  margin-left: -13.5%;
}
.user-info-top {
  text-align: center;
  font-size: 20px;
  color: #fff;
}
.profile_info_data {
  width: 96%;
  margin: 0 2%;
  border-radius: 10px;
  z-index: 99;
  position: relative;
  top: -40px;
  background: #fff;
  overflow: hidden;
}
.info_data_link {
  float: left;
  width: 33%;
  text-align: center;
  border-right: 1px solid #f1f1f1;
}
.info_data_ico {
  display: block;
  width: 100%;
  font-size: 14px;
  color: #333;
  padding: 15px 0px 7px;
}
.info_data_top {
  display: block;
  width: 100%;
  font-size: 14px;
  color: #333;
  padding: 15px 0px 5px;
}
.info_data_top1 {
  display: block;
  width: 100%;
  font-size: 14px;
  color: #333;
  padding: 15px 0px 1px;
}
.info_data_top > span {
  display: inline-block;
  font-size: 30px;
  color: #f90;
  font-weight: 700;
  line-height: 30px;
}

.info_data_bottom {
  display: inline-block;
  font-size: 14px;
  color: #666;
  font-weight: 400;
  padding-bottom: 10px;
}

.info_data_link:nth-of-type(2) > .info_data_top > span {
  color: #ff5f3e;
}

.info_data_link:nth-of-type(3) {
  border: 0;
}

.info_data_top > span {
  color: #6ac20b;
}
.profile_my_order {
  background: #fff;
  position: relative;
  top: -40px;
  width: 90%;
  margin-left: 5%;
  border-radius: 15px;
  margin-top: 10px;
}
.my_order {
  display: flex;
  align-items: center;
  padding-left: 15px;
}

.my_order > span {
  display: flex;
  align-items: center;
  width: 20px;
  height: 20px;
}
.my_order > .iconfont {
  margin-left: -10px;
  font-size: 25px;
}
.icon-jibenxinxi,
.icon-shenti,
.icon-shezhi1,
.icon-guanyu,
.icon-anquan,
.icon-ico,
.icon-lianxiren,
.icon-shenfenka {
  color: #9fbff9;
}
.my_order_div {
  width: 100%;
  border-bottom: 1px solid #f1f1f1;
  padding: 13px 10px 13px 10px;
  font-size: 17px;
  color: #333;
  display: flex;
  justify-content: space-between;
}
.my_order_div > span {
  display: block;
}
.my_order_icon {
  width: 10px;
  height: 10px;
}

.icon-fangxiangzuo {
  color: #bbb;
  font-size: 17px;
}
.file {
  position: relative;
  width: 70px;
  height: 70px;
  left: 50%;
  margin-left: -10%;
  background-color: #08f;
}
.updata {
  display: block;
  height: 100%;
  width: 100%;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}
.img_tou {
  position: absolute;
  top: 0;
  left: 0;
  width: 70px;
  height: 70px;
  border-radius: 50%;
}
.file > .avatar-uploader > .el-upload {
  border: none;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  z-index: 999;
}
.el-upload > .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 69px;
  height: 69px;
  line-height: 69px;
  text-align: center;
}
.el-upload > .el-icon-plus:before {
  content: " ";
}
.el-upload > .avatar {
  width: 70px;
  height: 70px;
  display: block;
  border-radius: 50%;
}
.icon-ico {
  font-size: 30px;
  color: black;
}
.icon-zhifu {
  font-size: 26px;
  color: chocolate;
}
.icon-youhuiquan {
  font-size: 26px;
  color: lightcoral;
}
.van-uploader__input {
  position: absolute;
  top: 0;
  left: 0;
  width: 70px !important;
  height: 70px !important;
  overflow: hidden;
  cursor: pointer;
  opacity: 0;
}
.van-nav-bar {
  background-color: #409eff !important;
}
</style>
